<template>
  <div class="container">
    <div class="left-content">
      <a-menu v-model:selectedKeys="selectedKeys" mode="vertical">
        <a-menu-item v-for="(item, index) in roleList" :key="item.name">
          <router-link :to="{ name: item.name }">{{ item.meta.title }}</router-link>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="right-content">
      <router-view :key="route.fullPath" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Tabs } from 'ant-design-vue'
import SplitPanel from '@/components/split-panel/index.vue'
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'

export default defineComponent({
  name: 'index',
  components: { SplitPanel, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const roleList: any = router.getRoutes().find(item => item.name == 'logs')
      ?.children as RouteRecordRaw[]
    console.log(router.getRoutes(), '简介')

    const state = reactive({
      selectedKeys: [route.name],
      policyTypes: {}
    })

    if (route.name == 'logs') {
      const childrenName = roleList[0].name
      router.replace({ name: childrenName })
      state.selectedKeys = [childrenName]
    }

    const tabChange = key => {
      router.push(key)
    }

    return {
      ...toRefs(state),
      route,
      roleList,
      tabChange
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;

  .left-content {
    width: 256px;
    text-align: center;
    .ant-menu {
      height: 100%;
    }
  }
  .right-content {
    flex: auto;
    overflow: auto;
  }
}
</style>
